const shState = {
    status: false,
    update() {
      console.log(`${this.timerIsActive_br}`);
    },
    get timerIsActive_br() {
      return this.status;
    },
    set timerIsActive_br(timerIsActive_br) {
      this.status = timerIsActive_br;
      this.update(this.status);
    }};
const days = document.querySelector(".bar-days").querySelector(".flip-card");
const hours = document.querySelector(".bar-hours").querySelector(".flip-card");
const minutes = document
    .querySelector(".bar-minutes")
    .querySelector(".flip-card");
const seconds = document
    .querySelector(".bar-seconds")
    .querySelector(".flip-card");
//let timerIsActive_br = false
// ** get the time totals, return them
function getTimeRemaining(countdown) {
    const now = new Date();
    const diff = countdown - now;

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((diff / 1000 / 60) % 60);
    const seconds = Math.floor((diff / 1000) % 60);

    return {
        diff,
        days,
        hours,
        minutes,
        seconds,
    };
}

function initializeClock(countdown) {
    console.log('clock initialized')
    function updateClockState() {
        const t = getTimeRemaining(countdown);
        flipAnimate(days, t.days);
        flipAnimate(hours, t.hours);
        flipAnimate(minutes, t.minutes);
        flipAnimate(seconds, t.seconds);
        if (t.diff <= 0) {
            clearInterval(intervalOfTime);
            document.querySelector("#shb-full-width").style.display = "none"
            document.documentElement.style.paddingTop = `0px`

            shState.timerIsActive_br = false
        } else {
            document.querySelector("#shb-full-width").style.display = "block"
            document.documentElement.style.paddingTop = `${document.querySelector("#shb-full-width").offsetHeight}px`

            shState.timerIsActive_br = true
        }
    }

    updateClockState();
    const intervalOfTime = setInterval(updateClockState, 1000);
}

const flipAnimate = (card, time) => {
    // ** confirm time has changed
    const currTime = card.querySelector(".top-half").innerText;
    if (time == currTime) return;

    let t = time <= 9 ? `0${time}` : time;
    const topHalf = card.querySelector(".top-half");
    const bottomHalf = card.querySelector(".bottom-half");
    const topFlip = document.createElement("div");
    const bottomFlip = document.createElement("div");

    // ** add animation, populate with current time
    topFlip.classList.add("top-flip");
    topFlip.innerText = currTime;

    bottomFlip.classList.add("bottom-flip");

    // ** animation begins, update top-half to new time
    topFlip.addEventListener("animationstart", () => {
        topHalf.innerText = t;
    });

    // ** animation ends, remove animated div, update bottom animation to new time
    topFlip.addEventListener("animationend", () => {
        topFlip.remove();
        bottomFlip.innerText = t;
    });

    // ** animation ends, update bottom-half to new time, remove animated div
    bottomFlip.addEventListener("animationend", () => {
        bottomHalf.innerText = t;
        bottomFlip.remove();
    });

    card.appendChild(topFlip);
    card.appendChild(bottomFlip);
};